'use client';

import { queryRolePermissionsById } from '@/services/api';
import { useQuery } from '@tanstack/react-query';
import type {
  IPagination,
  IPermission,
  IQueryParams,
  IRole,
} from '@/interfaces';
import { useState } from 'react';
import useToast from '@/hooks/useToast';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';

export default function QueryRolePermissions({ details }: { details: IRole }) {
  const [params, setParams] = useState<IQueryParams>({
    page: 0,
  });
  const { show } = useToast();

  const queryRolePermissionsByIdQuery = useQuery(
    ['/roles', details.id, '/permissions', params],
    async (context) => {
      return (await queryRolePermissionsById({
        id: context.queryKey[1] + '',
        query: context.queryKey[3] as any,
      })) as IPagination<IPermission>;
    },
    {
      keepPreviousData: true,
    },
  );

  function onClickPrevious() {
    const data = queryRolePermissionsByIdQuery.data;
    if (!data) {
      show({
        type: 'DANGER',
        message: '数据不存在',
      });
      return;
    }

    const page = Math.max(0, data.pageable.page - 1);
    setParams({ ...params, page });
  }

  function onClickNext() {
    const data = queryRolePermissionsByIdQuery.data;
    if (!data) {
      show({
        type: 'DANGER',
        message: '数据不存在',
      });
      return;
    }

    const page = Math.min(data.pageable.pages, data.pageable.page + 1);
    setParams({ ...params, page });
  }

  if (queryRolePermissionsByIdQuery.data) {
    const data = queryRolePermissionsByIdQuery.data;

    return (
      <div className="row">
        <div className="col">
          <div className="card">
            <div className="card-header bg-transparent text-muted">
              <i className="bi bi-shield me-2"></i>
              权限
            </div>
            <div className="card-body">
              <div className="table-responsive">
                <table className="table table-hover align-middle">
                  <thead>
                    <tr className="text-nowrap">
                      <th scope="col" className="w-10 fw-normal">
                        ID
                      </th>
                      <th scope="col" className="w-10 fw-normal">
                        别名
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.content.map((item) => {
                      return (
                        <tr key={item.id} className="text-nowrap">
                          <td>{item.id}</td>
                          <td>{item.alias}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>

                {data.content.length === 0 && (
                  <div className="text-center text-muted">暂无权限</div>
                )}

                <div className="my-4">
                  <nav aria-label="权限分页">
                    <ul className="pagination justify-content-end">
                      <li className="page-item">
                        <a
                          onClick={onClickPrevious}
                          className="page-link cursor-pointer"
                        >
                          上一页
                        </a>
                      </li>
                      <li className="page-item">
                        <a
                          onClick={onClickNext}
                          className="page-link cursor-pointer"
                        >
                          下一页
                        </a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (queryRolePermissionsByIdQuery.error) {
    return <Alert message={queryRolePermissionsByIdQuery.error} type="error" />;
  }

  return <AlertLoad />;
}
